<template>
  <!-- 头部 -->
  <div class="fixed">
    <van-nav-bar
      title="心灵电台"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>

  <!--tab选项卡 -->
  <van-tabs v-model="active" color="#3C95E9" title-active-color="black">
    <van-tab title="全部">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in newlist" :key="item">
          <div class="ul-list">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="title">
              <p>{{ item.tip }}</p>
              <br />
              <b>主播：</b><span>{{ item.title }}</span
              >&nbsp; <b>收听：</b><span>{{ item.evaluate }}</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-tab>
    <van-tab title="我喜欢的">内容 2</van-tab>
  </van-tabs>
</template>
<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed, onMounted, reactive, ref } from "vue";
export default {
  setup() {
    const route = useRouter();
    const active = 2;
    const store = useStore();
    const detaildata = () => store.dispatch("detaildata");
    const newlistdata = () => store.commit("newlist");
    const newlist = reactive(computed(() => store.state.Detail.newlist));
    const loading = ref(false);
    let finished = ref(false);
    onMounted(() => {
      detaildata();
    });
    const onClickLeft = () => {
      route.push("/home/index");
    };
    const onClickRight = () => {};
    const onLoad = () => {
      newlistdata();
    };
    return {
      onClickRight,
      detaildata,
      newlistdata,
      onClickLeft,
      loading,
      finished,
      active,
      store,
      route,
      onLoad,
      newlist,
    };
  },
};
</script>
<style lang="less" scoped>
.van-cell::after {
  border: none;
}
// 头部
.fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
}
/deep/.van-tabs__wrap {
  margin-top: 45px;
}
// 列表
.ul-list {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
  .img {
    width: 30%;
    height: 90px;
    float: left;
    img {
      width: 100%;
      border-radius: 10px;
      height: 90px;
      margin-left: 8px;
    }
  }
}
.title {
  width: 55%;
  height: 70%;
  margin-left: 5%;
  margin-top: 5%;
  float: left;
  p {
    margin: 0;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  b {
    font-size: 14px;
    color: #a2a2a2;
  }
  span {
    font-size: 14px;
    color: #a2a2a2;
  }
}
</style>
